<template>
  <div class="echartsBox" ref="echartsBox"></div>
</template>

<script>
// import "@/modules/map";
const elementResizeDetectorMaker = require("element-resize-detector");
// import "echarts/map/js/china.js";
import fontSize from "@/modules/fontSize";
export default {
  mounted() {
    this.$nextTick(() => {
      /* 重新渲染图表 */
      this.drawLine();
      let erd = elementResizeDetectorMaker();
      erd.listenTo(this.$refs.echartsBox, (ele) => {
        this.drawLine();
      });
    });
  },
  props: {
    //父组件传入的数据
    data: {
      type: Array | Object,
      default: () => ({ allRate: "", baifenbi: "" }),
    },
    width: {
      type: String | Number,
      default: () => 1,
    },
    titleTop: {
      type: String | Number,
      default: "40%",
    },
    subtext: {
      type: String | Number,
    },
    subtextStyleSize: {
      type: Number,
      default: 0.085,
    },
    img: {
      // 图片地址
      type: Object,
      default: () => ({
        url: require("@/assets/images/echarts/jishiqi.png"),
        width: 11,
      }),
    },
  },
  watch: {
    width: "drawLine",
    data: "drawLine",
    subtext: "drawLine",
    subtextStyleSize: "drawLine",
  },
  data() {
    return {
      theme: this.json.theme, //主题颜色
    };
  },
  methods: {
    //渲染echarts
    drawLine() {
      this.$nextTick(() => {
        try {
          let that = this;
          let myChart = this.$echarts.init(this.$refs.echartsBox);
          var labelData = [];
          var labelData1 = [];
          for (var i = 0; i < 150; ++i) {
            labelData.push({
              value: 1,
              name: i,
              itemStyle: {
                normal: {
                  color: "rgba(0,209,228,0)",
                },
              },
            });
          }
          for (var i = 0; i < labelData.length; ++i) {
            if (labelData[i].name < 50) {
              labelData[i].itemStyle = {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "#6dfbff",
                    },
                    {
                      offset: 1,
                      color: "#02aeff",
                    },
                  ]),
                },
              };
            }
          }
          for (var i = 0; i < 150; ++i) {
            labelData1.push({
              value: 1,
              name: i,
              itemStyle: {
                normal: {
                  color: "rgba(0,209,228,0)",
                },
              },
            });
          }
          for (var i = 0; i < labelData1.length; ++i) {
            if (labelData1[i].name < 150) {
              labelData1[i].itemStyle = {
                normal: {
                  color: "#464451",
                },
              };
            }
          }

          function Pie() {
            let dataArr = [];
            for (var i = 0; i < 100; i++) {
              if (i % 10 === 0) {
                dataArr.push({
                  name: (i + 1).toString(),
                  value: 30,
                  itemStyle: {
                    normal: {
                      color: "rgba(0,255,255,1)",
                      borderWidth: 0,
                      borderColor: "rgba(0,0,0,0)",
                    },
                  },
                });
              } else {
                dataArr.push({
                  name: (i + 1).toString(),
                  value: 100,
                  itemStyle: {
                    normal: {
                      color: "rgba(0,0,0,0)",
                      borderWidth: 0,
                      borderColor: "rgba(0,0,0,0)",
                    },
                  },
                });
              }
            }
            return dataArr;
          }
          // let color = "rgba(255, 74, 74, 1)";
          // if (this.subtext.indexOf("-") == -1) {
          //   color = "#3bffe6";
          // } else {
          //   color = "rgba(255, 74, 74, 1)";
          // }
          let option = {
            // backgroundColor: "#1f1e26",
            title: {
              text: this.data.allRate,
              // x: "50%",
              left: "center",
              itemGap: 5,
              top: this.titleTop,
              // textAlign: "center",
              textStyle: {
                fontSize: fontSize.fontSize(0.0845),
                fontWeight: "700",
                color: "rgba(59,255,230,1)",
                textAlign: "center",
              },
              // subtext: this.data.baifenbi+'%',
              subtext: this.subtext,
              subtextStyle: {
                color: "#3bffe6",
                fontWeight: "700",
                fontSize: fontSize.fontSize(this.subtextStyleSize),
              }, // 副标题样式
            },
            graphic: {
              elements: [
                {
                  type: "image",
                  z: 3,
                  style: {
                    image: this.img.url,
                    width: fontSize.fontSize(0.83) * this.width, //自适应大小,
                    height: fontSize.fontSize(0.83) * this.width, //自适应大小,
                  },
                  left: "center",
                  top: "center",
                },
              ],
            },
            polar: {
              // radius: ["78%", "70%"],
              center: ["50%", "50%"],
              radius: [
                fontSize.fontSize(0.32) * this.width,
                fontSize.fontSize(0.295) * this.width,
              ],
              width: fontSize.fontSize(0.23) * this.width, //自适应大小,
              height: fontSize.fontSize(0.23) * this.width, //自适应大小,
              // hoverAnimation: false,
              center: ["50%", "50%"],
            },
            angleAxis: {
              max: 100,
              show: false,
              startAngle: 0,
            },
            radiusAxis: {
              type: "category",
              show: true,
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
            },
            series: [
              {
                name: "",
                type: "bar",
                roundCap: true,
                barWidth: 60,
                showBackground: true,
                backgroundStyle: {
                  color: "#265ba0",
                },
                data: [100],
                coordinateSystem: "polar",
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                      1,
                      0,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: "#80e6ff",
                        },
                        {
                          offset: 1,
                          color: "#669dff",
                        },
                      ]
                    ),
                    borderColor: new this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      1,
                      [
                        {
                          offset: 0,
                          color: "#7777eb",
                        },
                        {
                          offset: 1,
                          color: "#70ffac",
                        },
                      ]
                    ),
                    shadowColor: "rgba(142, 152, 241, 0.6)",
                  },
                },
              },

              // {
              //   type: "pie",
              //   radius: ["69%", "70%"],
              //   center: ["50%", "50%"],
              //   data: [
              //     {
              //       hoverOffset: 1,
              //       value: 100,
              //       name: "",
              //       itemStyle: {
              //         color: "rgba(0,156,255,0.6)",
              //       },
              //       label: {
              //         show: false,
              //       },
              //       labelLine: {
              //         normal: {
              //           smooth: true,
              //           lineStyle: {
              //             width: 0,
              //           },
              //         },
              //       },
              //       hoverAnimation: false,
              //     },
              //     {
              //       label: {
              //         show: false,
              //       },
              //       labelLine: {
              //         normal: {
              //           smooth: true,
              //           lineStyle: {
              //             width: 0,
              //           },
              //         },
              //       },
              //       value: 100 - 100,
              //       hoverAnimation: false,
              //       itemStyle: {
              //         color: "#3c3a48",
              //       },
              //     },
              //   ],
              // },
            ],
          };
          myChart.setOption(option);
          myChart.off("click");
          /* 点击事件 */
          myChart.on("click", (params) => {});
          /* 大小自适应 */
          window.addEventListener("resize", function () {
            myChart.resize();
          });
        } catch (err) {
          console.log(err);
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  height: 100%;
  // background: red;
}
</style>
>
